feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern by jackgranatowski · Pull Request #339 · codeslash-dev/SLASHED

jackgranatowski · 2026-06-17T08:05:09Z

Add .sf-cq — a lightweight container-type: inline-size scope for
enabling anonymous @container queries without .sf-container's
max-width and centering. Addresses the API trap where sf-grid-cols-*
ratio grids silently broke when no container ancestor was present.

Refactor .sf-equal from a fixed-count grid (repeat(N, 1fr)) to the
RAM pattern (repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr))).
Columns now wrap intrinsically — no @container or @media required.
The --sf-equal-cols token is replaced by --sf-equal-min-col and four
sized presets (--sf-equal-min-col-2/3/4/6) in tokens.layout.css.

BREAKING: --sf-equal-cols is removed. Update custom overrides to
--sf-equal-min-col: (e.g. 14rem for a ~4-column layout).

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

Summary by CodeRabbit

Release Notes

New Features
- Added .sf-cq to create an inline-size container-query scope.
- Reworked the equal-columns grid (.sf-equal and variants) to be intrinsically responsive.
- Added --sf-radius-2xs for finer corner-radius control.
Improvements / Bug Fixes
- Improved horizontal overflow handling for prose tables, including correct behavior in non-prose contexts.
- Enhanced semantic color token behavior with more consistent typed computed values in dark mode.
Documentation
- Updated token/class references and generated API index materials to reflect the new utilities and tokens.

@container

Add .sf-cq — a lightweight container-type: inline-size scope for enabling anonymous @container queries without .sf-container's max-width and centering. Addresses the API trap where sf-grid-cols-* ratio grids silently broke when no container ancestor was present. Refactor .sf-equal from a fixed-count grid (repeat(N, 1fr)) to the RAM pattern (repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr))). Columns now wrap intrinsically — no @container or @media required. The --sf-equal-cols token is replaced by --sf-equal-min-col and four sized presets (--sf-equal-min-col-2/3/4/6) in tokens.layout.css. BREAKING: --sf-equal-cols is removed. Update custom overrides to --sf-equal-min-col: <width> (e.g. 14rem for a ~4-column layout). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

…, color @Property, radius-2xs, equal tokens macros.css: add overflow-x: auto fallback before overflow-inline: auto in .sf-prose table (Safari < 18.2 compat — last missing instance). tokens.css: register computed color tokens (--sf-color-primary, --sf-color-secondary, -tertiary, -action, -neutral, -base, -success, -warning, -error, -info, -danger) with @Property (initial-value = light mode) and add :root mirrors. Fixes the @supports dependency chain: in browsers supporting oklch(from) + sign() but NOT light-dark(), these tokens now resolve to valid light-mode colors rather than being undefined. User overrides to --sf-color-X or --sf-color-X-light always take precedence. tokens.css: add --sf-radius-2xs: calc(1px * var(--sf-radius-scale)) to complete the radius scale symmetry with text/space (2xs→4xl). Update token inventory comment to include 2xs. tokens.layout.css: correct --sf-equal-min-col-4 (13rem → 16rem) and --sf-equal-min-col-6 (9rem → 10rem) so the RAM-pattern grid produces ~4 and ~6 columns at a standard 72rem container, matching modifier intent. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

…rdcoded values The :root mirror for computed color tokens (--sf-color-primary etc.) must point to var(--sf-color-X-light) — not a hardcoded oklch value — so user overrides to --sf-color-primary-light are respected in browsers lacking light-dark() support. The @Property initial-value remains hardcoded (CSS spec requirement) and only activates when absolutely no declaration exists. The :root mirror is the effective default and the actual user-customisable path. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

coderabbitai · 2026-06-17T08:07:36Z

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 42 minutes and 34 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ce68b35e-c0c3-47a2-95a3-1a14757ea6a1

📥 Commits

Reviewing files that changed from the base of the PR and between e60b0d9 and ee352be.

📒 Files selected for processing (6)

configurator/src/data/api-index.generated.json
core/themes.css
core/tokens.css
docs/api-index.json
docs/api-index.md
docs/token-annotations.json

📝 Walkthrough

Walkthrough

Four core CSS files and comprehensive generated documentation are updated: core/tokens.css adds :root fallback definitions for computed color tokens mapping to *-light source tokens, introduces @property registrations for dark source tokens, and adds --sf-radius-2xs; core/themes.css centralizes -dark source token computation on :root using oklch derivation formulas and adds dark-only "on-color" text tokens; core/tokens.layout.css replaces the fixed --sf-equal-cols token with responsive --sf-equal-min-col-* presets; core/layout.css rewrites .sf-equal to use auto-fit/minmax responsive layout and adds .sf-cq container-query scope; core/macros.css adds overflow-x: auto to .sf-prose table and its reset. All generated metadata in configurator, docs, tests, and demo files are synced to reflect the new token structure, counts, classes, and semantic descriptions.

Changes

CSS Token and Layout Primitive Updates

Layer / File(s)	Summary
Color `@property` registration and :root fallbacks `core/tokens.css`	Adds new `:root` fallback block defining `--sf-color-{primary,secondary,tertiary,action,neutral,base,success,warning,error,info,danger}` via `var(--sf-color--light)` for unsupported browsers; registers new dark source tokens (`--sf-color--dark`) and computed semantic color tokens via `@property` with `<color>` syntax; adds `--sf-radius-2xs` to public token list documentation and defines it as `calc(1px * var(--sf-radius-scale))`; updates radius documentation for full/pill tokens.
Centralized dark token derivation `core/themes.css`	Introduces new `:root` dark-source tokens section computing `--sf-color--dark` for brand (`primary`, `secondary`, `tertiary`, `action`), neutral/base, and status families from corresponding `--sf-color--light` tokens via oklch(from ...) + clamp(...) formulas; updates `[data-theme="dark"]` block to reference pre-computed `:root` dark tokens instead of per-token inline fallback formulas; adds new `@supports` block for dark-only `--sf-color-text--on-*` tokens computing legible "on" text colors using sign() feature detection.
Equal columns responsive grid tokens `core/tokens.layout.css`	Removes `--sf-equal-cols` fixed column-count token and introduces `--sf-equal-min-col` base token plus per-preset `--sf-equal-min-col-{2,3,4,6}` variants defining minimum column widths for intrinsic responsiveness; wires `--sf-equal-gap` to `--sf-space-gap` shared spacing token.
Equal columns responsive grid layout `core/layout.css`	Rewrites `.sf-equal` grid-template-columns from `repeat(var(--sf-equal-cols), 1fr)` to `repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr))`; updates `.sf-equal--{2,3,4,6}` modifier classes to set `--sf-equal-min-col` from corresponding preset tokens rather than controlling fixed column count.
Container query helper and prose table overflow `core/layout.css`, `core/macros.css`	Adds `.sf-cq` utility setting `container-type: inline-size` for descendant `@container` queries without visible styling; adds `overflow-x: auto` to `.sf-prose table` alongside existing `overflow-inline: auto`; adds corresponding `overflow-x: revert` to `.sf-prose .sf-not-prose table` reset.
Generated API index and configuration metadata `configurator/src/data/api-index.generated.json`, `docs/api-index.json`, `docs/registry.json`, `docs/token-index.json`	Updates aggregated token/class counts and `byTier`/`byCategory` breakdowns; reclassifies status-color light-source tokens with "STATUS COLORS (-light source tokens)" labeling and `@property`-registration metadata; updates equal-columns token entries to document intrinsically responsive min-col model; adds `--sf-radius-2xs` and `.sf-cq` entries with full metadata; updates equal-columns layout class descriptions from "Fixed columns" to "Equal columns (intrinsically responsive)".
Generated documentation and test fixtures `docs/api-index.md`, `docs/classes.md`, `docs/demo.html`, `docs/token-index.md`, `docs/tokens.md`, `docs/token-annotations.json`, `tests/baseline-modern.json`, `tests/token-api.snapshot.json`	Updates all documentation sections with refreshed token/class counts; rewrites semantic color token descriptions from dark-auto-derivation narrative to `@property-registered` computed-token wording with light/dark interpolation; removes `--sf-equal-cols` and adds `--sf-equal-min-col` plus presets to token reference; adds `--sf-radius-2xs` and `.sf-cq` entries; updates equal-columns descriptions to "intrinsically responsive" RAM-pattern language; adds `.sf-cq` container-query example to demo; regenerates theme baseline and test snapshot with updated token values.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

codeslash-dev/SLASHED#327: This PR resolves the naming collision between .sf-equal (grid) and .sf-equal-height (macro) by reworking .sf-equal with an intrinsically responsive --sf-equal-min-col-* token model, directly addressing v1.0 API freeze clarity concerns.

Possibly related PRs

codeslash-dev/SLASHED#117: Introduces .sf-equal grid using --sf-equal-cols and --sf-equal-gap, which this PR directly refactors to the auto-fit/minmax responsive implementation with min-column presets.
codeslash-dev/SLASHED#321: Modifies .sf-prose table overflow in core/macros.css to use logical overflow-inline; this PR adds physical overflow-x: auto alongside it for full cross-browser coverage.
codeslash-dev/SLASHED#26: Modifies computed color token handling in core/tokens.css that this PR extends with new :root fallback definitions and centralized dark token derivation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: introducing the .sf-cq class and refactoring .sf-equal to use the RAM (Responsive Auto-fit Minmax) pattern.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/slashed-css-audit-45h81i

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

core/macros.css (1)
75-75: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add overflow-x: revert to match the new fallback property.

Line 50 now declares both overflow-x: auto (Safari < 18.2 fallback) and overflow-inline: auto. The .sf-not-prose reset at line 75 reverts overflow-inline but omits overflow-x, so tables inside .sf-prose .sf-not-prose will still scroll horizontally in Safari < 18.2—contradicting .sf-not-prose's documented purpose to fully reset prose styles.
🛠️ Proposed fix to add the missing revert
-  .sf-prose .sf-not-prose table      { margin-block: 0; display: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }
+  .sf-prose .sf-not-prose table      { margin-block: 0; display: revert; overflow-x: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@core/macros.css` at line 75, The .sf-not-prose table rule at line 75 reverts
overflow-inline but is missing overflow-x: revert. Since line 50 declares both
overflow-x: auto (as a Safari < 18.2 fallback) and overflow-inline: auto, the
.sf-not-prose reset must include both properties to fully revert prose styles.
Add overflow-x: revert to the existing list of revert declarations in the
.sf-not-prose table selector to ensure tables inside .sf-prose .sf-not-prose
have both overflow properties consistently reset.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@core/macros.css`:
- Line 75: The .sf-not-prose table rule at line 75 reverts overflow-inline but
is missing overflow-x: revert. Since line 50 declares both overflow-x: auto (as
a Safari < 18.2 fallback) and overflow-inline: auto, the .sf-not-prose reset
must include both properties to fully revert prose styles. Add overflow-x:
revert to the existing list of revert declarations in the .sf-not-prose table
selector to ensure tables inside .sf-prose .sf-not-prose have both overflow
properties consistently reset.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: eb01024f-2786-4868-93b9-fd6f462c896a

📥 Commits

Reviewing files that changed from the base of the PR and between 050a3d8 and 3ca5a27.

📒 Files selected for processing (4)

core/layout.css
core/macros.css
core/tokens.css
core/tokens.layout.css

Registering --sf-color-* (computed tokens) as <color> via @Property caused child [data-theme="dark"] elements to inherit :root's resolved LIGHT color instead of computing the dark override. The typed property prevented var(--sf-color-X-dark, oklch(from var(--sf-color-X-light) ...)) from resolving correctly on child elements. Removing these @Property blocks restores unregistered custom-property behavior: raw text inheritance, correct theme scoping on nested elements, and baseline tests matching raw light-dark()/oklch() text values. The -light source tokens keep their @Property <color> registration (needed for @Property animation and typed transitions). Computed tokens are plain custom properties resolved by the :root mirrors block. Also fixes: - sf-equal 3-col layout: --sf-equal-min-col-3 18rem → 15rem (900px ÷ 3 fit) - overflow-x/overflow-inline ordering in .sf-prose .sf-not-prose table - Add .sf-cq demo to docs/demo.html (coverage test) - Update token-api snapshot: remove --sf-equal-cols, add new equal/radius tokens - Rebuild registry, dist badges, and all generated docs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/api-index.json (1)
2124-2126: ⚡ Quick win

Description-value mismatch for status color tokens.

The light-dark() function became baseline-available in May 2024, so fallback definitions are still important for compatibility. The description states these tokens "resolve to the -light source token" and are "Plain :root mirrors," but the value field shows the full light-dark(...) formula with auto-dark derivation.

This appears to reflect that the source CSS defines both a :root fallback (e.g., --sf-color-action: var(--sf-color-action-light)) and an @supports override with light-dark(). The metadata is extracting the @supports value while describing the :root behavior, which may confuse API consumers.

If this is auto-generated, consider whether the generation logic should:

Show both values (fallback + override), or

Clarify in the description that the value shown is the modern/preferred definition

Also applies to: 3123-3125, 4557-4559, 4731-4733, 4905-4907, 5340-5342, 6368-6370, 7425-7427, 8482-8484, 8656-8658, 10206-10208
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/api-index.json` around lines 2124 - 2126, For the status color tokens
(including all instances listed in "Also applies to"), there is a mismatch
between the description and the value field. The description states these tokens
resolve to the -light source token as "Plain :root mirrors," but the value field
shows the full light-dark() formula with auto-dark derivation. Update the
description for each affected token to clarify that the value shown represents
the modern preferred definition using light-dark() for browsers where it is
available, while acknowledging that fallback behavior may differ for older
browser support. Apply this clarification consistently across all affected token
entries.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/api-index.json`:
- Around line 16510-16511: The description for the `--sf-radius-2xs` token entry
is incorrectly discussing the behavior of `--sf-radius-full` (mentioning
pills/circles and topological constants) instead of describing `--sf-radius-2xs`
itself. Replace the description to accurately explain that `--sf-radius-2xs` is
the smallest radius token (extra-extra-small) and that, unlike
`--sf-radius-full`, it IS scaled by the `--sf-radius-scale` variable. Remove all
references to `--sf-radius-full`, pills, circles, and the topological constant
concept from this description field.

---

Nitpick comments:
In `@docs/api-index.json`:
- Around line 2124-2126: For the status color tokens (including all instances
listed in "Also applies to"), there is a mismatch between the description and
the value field. The description states these tokens resolve to the -light
source token as "Plain :root mirrors," but the value field shows the full
light-dark() formula with auto-dark derivation. Update the description for each
affected token to clarify that the value shown represents the modern preferred
definition using light-dark() for browsers where it is available, while
acknowledging that fallback behavior may differ for older browser support. Apply
this clarification consistently across all affected token entries.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 11141f5c-54d9-46c6-ae1e-f3121c4bdab6

📥 Commits

Reviewing files that changed from the base of the PR and between 3ca5a27 and 40e80d3.

⛔ Files ignored due to path filters (2)

dist/badge-essential.json is excluded by !**/dist/**
dist/badge-optimal.json is excluded by !**/dist/**

📒 Files selected for processing (13)

configurator/src/data/api-index.generated.json
core/macros.css
core/tokens.css
core/tokens.layout.css
docs/api-index.json
docs/api-index.md
docs/classes.md
docs/demo.html
docs/registry.json
docs/token-index.json
docs/token-index.md
docs/tokens.md
tests/token-api.snapshot.json

✅ Files skipped from review due to trivial changes (5)

docs/demo.html
docs/token-index.json
docs/token-index.md
docs/api-index.md
configurator/src/data/api-index.generated.json

🚧 Files skipped from review as they are similar to previous changes (1)

core/tokens.layout.css

…ia -dark source tokens Registers computed color tokens (--sf-color-primary etc.) as @Property <color> to enable CSS transitions between light and dark values when [data-theme] toggles. The previous attempt broke child-element dark theming because var(--sf-color-X-dark, oklch(from var(--sf-color-X-light) ...)) fails type-checking when the outer var() has no match and the fallback contains a nested var() reference in a registered <color> property. Fix: declare --sf-color-X-dark as plain :root tokens inside the @supports (color: oklch(...)) block in themes.css, using the same relative color formulas that were previously hidden in the var() fallbacks. [data-theme="dark"] now assigns var(--sf-color-X-dark) directly — a simple var reference that type-checks correctly on child elements. Dark values auto-compute from -light via relative color syntax, and --sf-color-X-dark is now a first-class user-overridable token. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

The @Property registrations for --sf-color-{action,base,danger,error,info, neutral,primary,secondary,success,tertiary,warning}-dark in core/tokens.css are now surfaced in the TOKEN_FILES scan. Update the locked snapshot so the token-api spec does not flag them as unexpected additions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

…d update baselines Add @Property <color> registrations for all 11 -dark source tokens (primary, secondary, tertiary, action, neutral, base, success, warning, error, info, danger) so Chromium resolves them to typed absolute OKLCH values on :root. Without this, child elements with [data-theme="dark"] inherit the raw formula text and Chrome fails multi-level var() substitution inside registered <color> properties, producing light colors in dark sections. Also: - Add --sf-radius-2xs to docs/token-annotations.json (configurator sync) - Update tests/baseline-modern.json to reflect registered @Property behavior (source tokens now return absolute OKLCH; derived tokens return formula text with substituted absolute OKLCH for the registered vars) - Rebuild dist/ and docs/ (api-index, token-index, registry, badge scores) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

…dark"] Unregistered custom properties bake their var() substitutions at the element that declares them (here: :root in light mode). Child elements scoped with [data-theme="dark"] inherit the pre-substituted light values for --sf-color-bg, --sf-color-inset, --sf-color-raised, --sf-color-overlay, --sf-color-inverse and all --sf-color-text--on-* tokens, so neither the demo a11y-panel probes nor real scoped dark sections showed correct dark surface colours. Fix: explicitly re-declare every affected token inside [data-theme="dark"] so the cascade produces the correct dark values at that element's scope rather than inheriting the root's baked light text. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@configurator/src/data/api-index.generated.json`:
- Around line 2286-2288: The "group" and "description" fields for non-status
color tokens (primary, secondary, tertiary, base, neutral, and action) are
incorrectly labeled as "STATUS COLORS (-light source tokens)" with descriptions
referencing only status colors. This mislabeling occurs across multiple entries
in the file. For each of the listed line ranges, update the "group" field to use
appropriate taxonomy that reflects these are general color tokens rather than
status-specific tokens, and update the corresponding "description" field to
remove status-specific language and accurately describe the actual color
category being defined.

In `@core/themes.css`:
- Around line 289-304: The on-color text tokens like
--sf-color-text--on-primary, --sf-color-text--on-secondary, and all related
on-color variables are only declared within the [data-theme="dark"] block. When
a light-themed section exists within a dark-mode page, these tokens will inherit
the dark-mode-computed values, causing incorrect contrast. Add a corresponding
[data-theme="light"] block immediately after the dark theme block that
re-declares all the same on-color token variables with values appropriate for
light theme, using a sign logic that inverts the condition from the dark theme
block to ensure correct text contrast in light mode.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ec1a182b-48f2-4733-abac-6d93faa2767e

📥 Commits

Reviewing files that changed from the base of the PR and between 4989a61 and e60b0d9.

⛔ Files ignored due to path filters (2)

dist/badge-essential.json is excluded by !**/dist/**
dist/badge-optimal.json is excluded by !**/dist/**

📒 Files selected for processing (12)

configurator/src/data/api-index.generated.json
core/themes.css
core/tokens.css
docs/api-index.json
docs/api-index.md
docs/registry.json
docs/token-annotations.json
docs/token-index.json
docs/token-index.md
docs/tokens.md
tests/baseline-modern.json
tests/token-api.snapshot.json

✅ Files skipped from review due to trivial changes (5)

docs/token-annotations.json
docs/token-index.md
docs/registry.json
docs/token-index.json
docs/api-index.md

…ions and correct -dark token group Symmetric fix for the same baking problem solved in [data-theme="dark"]: when :root is in dark mode (OS preference or explicit attribute) and a child section uses [data-theme="light"], surface tokens (--sf-color-bg etc.) and on-color text tokens (--sf-color-text--on-*) inherited the dark-mode-baked values from :root. Add explicit re-declarations of all five surface tokens and all eleven on-color tokens to [data-theme="light"] so scoped light sections always derive from the correct light brand colors regardless of root mode. Also fixes mislabeled group metadata for the eleven --sf-color-*-dark @Property tokens: split the multiline comment in tokens.css into a recognised single-line sub-header so gen-api-index.js assigns the group "DARK SOURCE TOKENS (-dark, animatable)" instead of inheriting the previous "STATUS COLORS (-light source tokens)" banner. Added matching _groups entry to token-annotations.json. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

claude added 3 commits June 17, 2026 07:45

coderabbitai Bot reviewed Jun 17, 2026

View reviewed changes

Comment thread docs/api-index.json Outdated

claude added 4 commits June 17, 2026 12:04

coderabbitai Bot reviewed Jun 17, 2026

View reviewed changes

Comment thread configurator/src/data/api-index.generated.json Outdated

Comment thread core/themes.css

jackgranatowski merged commit b95f8d5 into main Jun 17, 2026
13 checks passed

This was referenced Jun 25, 2026

Move spacing generator into Spacing Studio and add panels #411

Closed

fix(configurator): live preview now reacts to panel changes #424

Merged

docs: add user-manual with end-user color system guide #467

Merged

coderabbitai Bot mentioned this pull request Jul 3, 2026

fix(layout): rebuild .sf-equal as CSS multi-column, plus 4 quick-win fixes #509

Merged

Navigation Menu

Uh oh!

feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern - #339

feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern#339
jackgranatowski merged 9 commits into
mainfrom
claude/slashed-css-audit-45h81i

jackgranatowski commented Jun 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 17, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

jackgranatowski commented Jun 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jackgranatowski commented Jun 17, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 17, 2026 •

edited

Loading